<template>
	<view class="frame">
		<view class="f_content">
			<view class="fc_row" v-for="item,index in content" :key="index">
				<view class="fcr_top">
					<view class="fcrt_img">
						<image :src="getiamgf(item.questionImg)" mode="aspectFill"></image>
					</view>
					<view class="fcrt_on">
						<view class="fcrto_one">
							{{item.question}}
						</view>
						<view class="fcrto_two">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="fcr_bottom" v-if="item.reply != null">
					平台回复：{{item.reply}}
				</view>
			</view>
			<view class="lisrsimage" v-if="content.length < 0 || content.length == 0 ">
				<image src="https://fangduoduo-1328761458.cos.ap-nanjing.myqcloud.com/mini_program/zanwushiyuhyasda.png"
					mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
			<view class="bolck"></view>
		</view>
	</view>
</template>

<script>
	import imageutil from '@/common/config.js'
	export default {
		data() {
			return {
				page: 1,
				content: [],
				loginInfo: {},
				imageUrl:imageutil.configURLs
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			async getData() {
				let data = await this.$api.getfyxlist();
				uni.stopPullDownRefresh();
				this.content = [...this.content, ...data.rows]
				const uniqueArr = [];
				const map = new Map();
				for (const item of this.content) {
					if (!map.has(item.id)) {
						map.set(item.id, true);
						uniqueArr.push(item);
					}
				}
				this.content = uniqueArr
			},
			getiamgf(e){
				const urlArray = e.split(',');
				return this.imageUrl+urlArray[0];
			}
		},
		onPullDownRefresh() {
			var that = this
			that.getData();
		},
		onShareAppMessage(e) {
			console.log(e)
		}
	}
</script>

<style lang="scss" scoped>
	.frame {
		width: 100%;
		min-height: 100vh;
		background: #F5F6F8;

		.f_header {
			width: 100%;
			height: 88rpx;
			background-color: white;
			display: flex;
			align-items: center;

			.fh_row {
				width: 95%;
				height: 72rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				background: rgba(245, 246, 248, 1);
				border-radius: 20rpx;
				padding: 4rpx;
				box-sizing: border-box;
				margin: auto;

				.fh_bblock {
					width: 340rpx;
					height: 64rpx;
					line-height: 64rpx;
					color: rgba(48, 49, 51, 1);
					font-family: 'Alibaba PuHuiTi 2.0';
					font-size: 30rpx;
					text-align: center;
					border-radius: 16rpx;
				}

				.on {
					color: #0CCEA1 !important;
					background: white !important;
				}
			}
		}

		.f_content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 24rpx 2.5%;
			box-sizing: border-box;

			.fc_row {
				width: 100%;
				height: auto;
				background: white;
				border-radius: 12rpx;
				margin-bottom: 30rpx;

				.fcr_top {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					padding: 24rpx;
					box-sizing: border-box;

					.fcrt_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						overflow: hidden;
						position: relative;

						.fci_float {
							width: 100%;
							height: 100%;
							background: rgba(255, 255, 255, 0.65);
							text-align: center;
							line-height: 120rpx;
							position: absolute;
							top: 0;
							left: 0;
							font-size: 25rpx;
							color: rgba(0, 0, 0, 0.6);
							font-family: 'Alibaba PuHuiTi 2.0';
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.fcrt_on {
						width: 80%;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;

						.fcrto_one {
							width: 100%;
							line-height: 50rpx;
							font-size: 32rpx;
							color: rgba(48, 49, 51, 1);
							font-family: 'Alibaba PuHuiTi 2.0';
							font-weight: 500;
							margin-bottom: 6rpx;
						}

						.fcrto_two {
							width: 100%;
							line-height: 40rpx;
							font-size: 24rpx;
							color: rgba(144, 147, 153, 1);
							font-family: 'Alibaba PuHuiTi 2.0';
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 6rpx;
						}

						.fcrto_three {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							line-height: 32rpx;
							font-size: 24rpx;
							color: rgba(144, 147, 153, 1);
							font-family: 'Alibaba PuHuiTi 2.0';
							display: flex;
							flex-direction: row;
							align-items: center;

							::v-deep .u-icon {
								margin-top: 4rpx;
							}
						}
					}
				}

				.fcr_bottom {
					width: 95%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					padding: 16rpx 24rpx;
					box-sizing: border-box;
					margin: 0 auto 20rpx;
					background: rgba(245, 246, 248, 1);
					border-radius: 10rpx;
					font-family: 'Alibaba PuHuiTi 2.0';
					font-size: 24rpx;
					font-weight: 400;
					line-height: 36rpx;
					letter-spacing: 0.04em;
					text-align: left;
					display: -webkit-box;
					overflow: hidden;
					word-break: break-all;
					/* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 10;
					/** 显示的行数 **/
				}
			}
		}
	}
</style>